<template>
  <h1>商品列表</h1>
  <div class="classify">
    <div class="fen">
      分类：
      <el-select
        clearable
        v-model="query.category"
        class="m-2"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in goods"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </div>

    <div class="tiao">
      搜索条件：
      <el-input v-model="query.search"></el-input>
      <el-button :plain="true" @click="getshop">查询</el-button>
    </div>
    <!-- <div class="lieb">
      <el-button @click="showdata">hh</el-button>
    </div> -->
  </div>
  <el-table :data="shoplist" style="width: 100%" class="liebiao">
    <el-table-column prop="proid" label="编号" width="200" />
    <el-table-column prop="category" label="名称" width="80" />

    <el-table-column label="图片" width="180">
      <template #default="scope">
        <img class="img" :src="scope.row.img1" />
      </template>
    </el-table-column>
    <el-table-column prop="proname" label="品牌" width="200" />
    <el-table-column prop="sales" label="销量" width="100" />
    <el-table-column prop="stock" label="库存" width="80" />
    <el-table-column label="是否秒杀" width="150">
      <template #default="scope">
        <el-switch
          name="ms"
          :active-value="1"
          :inactive-value="0"
          @change="changekill(scope.row.proid, scope.row.isseckill)"
          v-model="scope.row.isseckill"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </template>
    </el-table-column>
    <el-table-column label="是否推荐">
      <template #default="scope">
        <el-switch
          name="ms"
          :active-value="1"
          :inactive-value="0"
          @change="changfn(scope.row.proid, scope.row.isrecommend)"
          v-model="scope.row.isrecommend"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </template>
    </el-table-column>
  
  </el-table>
 
 
</template>

<script setup lang="ts">
import service from "../../../utlis/service";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { ElNotification } from "element-plus";
import "element-plus/es/components/notification/style/css";
interface Ishops {
  banners: string;
  category: string;
  proname: string;
  originprice: number;
  isrecommend: number;
  img1: string;
  isseckill: number;
  stock: number;
  desc: string;
  sales: number;
}
let shoplist = reactive<Ishops[]>([]);

const goods = reactive<string[]>([]);

const query = reactive<{
  category?: string;
  search?: string;
}>({
  category: "",
  search: "",
});
const params = reactive<{
  count: number;
  limitNum: number;
}>;

const handleClick = () => {
  service({
    url: "/pro/getCategory",
  }).then((res) => {
    if (res.data.code === "200") {
      goods.length = 0;
      goods.push(...res.data.data);
    }
  });
};
handleClick();
const getshop = () => {
  service({
    url: "/pro/searchPro",
    method: "post",
    data: `category=${query.category}&search=${query.search}`,
  }).then((res) => {
    shoplist.length = 0;
    shoplist.push(...res.data.data);
    
    
  });
  ElMessage({
    message: "正在查询中",
    type: "success",
  });
};
getshop();

const changekill = (proid: string, flag: string) => {
  service({
    url: "/pro/updateFlag",
    method: "post",
    data: {
      proid: proid,
      type: "isseckill",
      flag: flag,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      console.log(res.data);
    }
  });
};
const changfn = (proid: string, flag: string) => {
  service({
    url: "/pro/updateFlag",
    method: "post",
    data: {
      proid: proid,
      type: "isrecommend",
      flag: flag,
    },
  }).then((res) => {
    if (res.data.code === "200") {
      console.log(res.data);
    }
  });
};
const showdata=()=>{
  service({
    url:"/pro/showdata",
    method:"post",
    data:{
      type:"isrecommend",
      flag:1

    }
  }).then(res=>{
    console.log(res.data.data);

  })

}

</script>

<style scoped>
.classify {
  margin-top: 20px;
  display: flex;
}
.img {
  width: 100px;
  height: 75px;
}
.liebiao {
  margin-top: 20px;
}
.el-input {
  width: 400px;
  height: 40px;
}
.tiao {
  margin-left: 50px;
}
.el-button {
  margin-left: 50px;
}
</style>